﻿<!doctype html>
<html>

<head>
    <title>双拼练习</title>
    <link rel="stylesheet" type="text/css" href="shuang/css.css" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10"></script>
    <script>
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?1e6b54e22f8dbb95bb10234f0de47ea1";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
            
</head>

<body>

    <div id='shuangApp'>

        <div class="make-top-bar-left">

            <div class="top-bar">

                <div class="top-box-left">

                    <div class='top-box'>
                        <span>双拼方案: </span>
                        <select v-model='selected' style="background-color: transparent">
                            <option>小鹤双拼</option>
                            <option>搜狗双拼</option>
                        </select>
                    </div>

                    <div class='top-box'>
                        <span>拼音: </span>
                        <select v-model='selectPy' style="background-color: transparent">
                            <option>有拼音</option>
                            <option>无拼音</option>
                        </select>
                    </div>
                </div>

                <div class="top-box-right">
                    <div class="top-box">
                        <span class='reminder' @click='tipsFunc'>{{ tipsMsg }}</span>
                    </div>
                    <div class="top-box">
                        <span><a target="_blank" href="./spkeyboard/spkeyboard.html">键位图</a></span>
                    </div>
                </div>
            </div>

        </div>

        <div class="box" :style='{fontSize: fSize + "em"}'>
            <div class="font-size">
                <span @click='fSize += 0.1'>＋</span>
                <span @click='fSize -= 0.1'>－</span>
            </div>
            <div class="box-bd">
                <div class="wzk">
                    <span class="wz">{{ uiWenzi }}</span>
                </div>
                <div class="pyk">
                    <span class='py' v-show='isShow'>{{ uiPinyin }}</span>
                    <div>
                        <input type="text" autofocus="autofocus" v-model='uiInput' maxlength="2"/><span @click='clearFunc' class="clear">×</span>
                    </div>
                </div>
            </div>
        </div>

        <div class='keyboard-UI'>

        </div>

    </div>
    <script src='shuang/keyboard.js'></script>
    <script src="shuang/js.js"></script>
</body>

</html>